<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'video_info.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/bootstrap/css/bootstrap.css">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/echarts.js"></script>
</head>

<style type="text/css">
div{
	margin: 10px;
	padding: 5px;
}
.red{
	background-color: red;
}
.blue{
	background-color: blue;
}
.black{
	background-color: black;
}
.yellow{
	background-color: yellow;
}
</style>


<script>
	$(function(){
		 // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
        	    color:['red','#2f4554', 'gray', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
        	    title: {
        	        text: '--- 特征点数据分布 ---',
    	            x: 'center',
                    y: 0,
                    textStyle:{
                        color:'#277EAB'
                    }
        	    },
        	    legend: {
        	        data:['挥手','探身','睡觉','玩手机'],
        	        align:'right',
        	        orient:'right',
        	        right:0,
        	        top:50,
        	        itemWidth:10,
        	        itemHeight:10
        	    },
        	    xAxis: {
        	        type : 'category',
        	        boundaryGap : false,
        	        data : ['0','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00']
        	    },
        	    yAxis: {
        	        boundaryGap : false,
        	        splitLine:{show:false} ,
        	        data:['','挥手','探身','睡觉','玩手机'],
        	    },
        	    series: [{
        	        name:'挥手',
        	        symbolSize: 20,
        	        data: [
        	            [2, 1],
        	            [4, 1],
        	            [8, 1],
        	            [10, 1],
        	            [12, 1],
        	            [18, 1],
        	            [20, 1],
        	            [0, 1]
        	        ],
        	        symbolSize:8,
        	        type: 'scatter'
        	    },
        	    {
        	        name:'探身',
        	        symbolSize: 20,
        	        data: [
        	            [1, 2],
        	            [3.0, 2],
        	            [5, 2],
        	            [7, 2],
        	            [13, 2],
        	            [15.0, 2],
        	            [17.0, 2],
        	            [21.0, 2],
        	        ],
        	        symbolSize:8,
        	        type: 'scatter'
        	    },
        	     {
        	        name:'睡觉',
        	        symbolSize: 20,
        	        data: [
        	            [1.2, 3],
        	            [2.5, 3],
        	            [3.6, 3],
        	            [2.54, 3],
        	            [21.2, 3],
        	            [11, 3],
        	            [20.30, 3]
        	        ],
        	        symbolSize:8,
        	        type: 'scatter'
        	    },
        	     {
        	        name:'玩手机',
        	        symbolSize: 20,
        	        data: [
        	            [1, 4],
        	            [5, 4],
        	            [9.0, 4],
        	            [11, 4],
        	            [15.0, 4],
        	            [17.0, 4],
        	            [21.0, 4],
        	            [22.0, 4]
        	        ],
        	        symbolSize:8,
        	        type: 'scatter'
        	    }]
        	};


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        
        
        // 基于准备好的dom，初始化echarts实例
        var myChart2 = echarts.init(document.getElementById('main2'));

        // 指定图表的配置项和数据
        var option2 =  {
        	    color:['#277EAB','#2f4554', 'gray', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
        	    title: {
        	        text: '--- 速度曲线 ---',
                    x: 'center',
                    y: 0,
                    textStyle:{
                        color:'#277EAB'
                    }
        	    },
        	    legend: {
        	        align:'right',
        	        orient:'right',
        	        right:0,
        	        top:50,
        	        itemWidth:10,
        	        itemHeight:10
        	    },
        	    xAxis: {
        	        type : 'category',
        	        boundaryGap : false,
        	        data : ['0','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00']
        	    },
        	    yAxis: {
        	        boundaryGap : false,
        	        splitLine:{show:false} ,
        	    },
        	    series: [{
        	        itemStyle : { normal: {label : {show: true}}},
        	        symbolSize: 20,
        	        data: [
        	            [0, 0],
        	            [2, 1],
        	            [4, 4],
        	            [8, 9],
        	            [10, 10],
        	            [12, 16],
        	            [18, 50],
        	            [20, 60],
        	            [23, 80]
        	        ],
        	        symbolSize:8,
        	        type: 'line'
        	    }]
        	};


        // 使用刚指定的配置项和数据显示图表。
        myChart2.setOption(option2);
		
		
	})
</script>


<body style="background-color: #5a595900;">
 <div>
 	<div style="width: 70%;height: 50%">
		<div style="width: 45%;float: left;height: 100%">
			<video src="http://vjs.zencdn.net/v/oceans.mp4" width="100%" height="100%" type="video/mp4" controls="controls" autoplay="autoplay" loop="loop"></video>
		</div>
		<div style="width: 45%;float: left;height: 100%">
			<ul style="width: 100%;height: 100%" id="ul-info">
				<c:forEach items="${list}" var="obj">
					<li>${obj.statusname}	开始时间:${obj.starttime}	结束时间:${obj.endtime} 时长:20s 严重等级:${obj.ifnotify } 是否警告:${obj.ifalarm }</li>
				</c:forEach>
			</ul>
		</div>
	</div>
 	<div style="width:70%;height: 30%">
		<div style="width: 45%;float: left;height: 100%">
			<div id="main2" style="width: 590px;height: 200px;"></div>
		</div>
		<div style="width: 45%;float: left;height: 100%">
			<%-- ${list} --%>
			<div id="main" style="width: 590px;height: 200px;"></div>
		</div>
	</div>
 </div>	
</body>
</html>